<template>
  <view class="download-history-container">
    <view class="tabs-container">
      <u-tabs
        :list="allArtworksTypeListData"
        :is-scroll="false"
        :current="tabsCurrent"
        inactive-color="#eaeaea"
        active-color="#56d39d"
        bg-color="transparent"
        class="tabs-content"
        name="type_name"
        @change="changeTbas"></u-tabs>
    </view>
    <view class="author-artworks-list">
      <scroll-view class="author-artworks-scroll-list" scroll-y lower-threshold="100" @scrolltolower="loadMore">
        <!-- 动态壁纸 -->
        <VideoArtworksList3 v-if="artworksType == 4" :artworks-list="artworksListData" @handleArtworks="handleArtworks"></VideoArtworksList3>
        <!-- 电视剧 -->
        <TvArtworksList v-else-if="artworksType == 5" :artworks-list="artworksListData" @handleArtworks="handleArtworks" @onChange="changeArtworksList"></TvArtworksList>
        <!-- 头像、表情包 -->
        <ArtworksSquareList v-else-if="artworksType == 2 || artworksType == 3" :artworks-list="artworksListData" @handleArtworks="handleArtworks"></ArtworksSquareList>
        <!-- 壁纸 -->
        <ArtworksList3 v-else :artworks-list="artworksListData" @handleArtworks="handleArtworks"></ArtworksList3>
        <Loading v-if="loading"></Loading>
        <u-empty v-else-if="!loading && artworksListData.length === 0" text="暂无此类作品" mode="list"></u-empty>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import { myArtworksListByMiniProgram } from '@/api/applet';
  import { allArtworksTypeByMerchantId } from '@/api/user';
  import ArtworksList3 from '@/components/artworksList/artworksList3.vue';
  import ArtworksSquareList from '@/components/artworksList/artworksSquareList.vue';
  import VideoArtworksList3 from '@/components/artworksList/videoArtworksList3.vue';
  import TvArtworksList from '@/components/artworksList/tvArtworksList.vue';
  import Loading from '@/components/loading/loading.vue';
  import { parseTime } from '@/utils/parseTime';
  import { mapGetters } from 'vuex';
  export default {
    components: {
      ArtworksList3,
      ArtworksSquareList,
      VideoArtworksList3,
      TvArtworksList,
      Loading
    },
    data() {
      return{
        tabsCurrent: 0,
        tabsList: [],
        loading: true,
        showNoMoreFlag: false,
        artworksType: 1,
        allArtworksTypeListData: [],
        artworksListData: [],
        searchForm: {
          pageNum: 1,
          pageSize: 24,
        },
      }
    },
    computed: {
      ...mapGetters([
        'token',
      ])
    },
    created() {
      this.getMyArtworksListByMiniProgram();
      this.getAllArtworksTypeByMerchantId();
    },
    methods: {
      // 点击查看作品
      handleArtworks(rowDta) {
        // 壁纸详情
        if (rowDta.type === 1) {
          uni.navigateTo({
            url: `/pages/artworks/wallpaperDetails?id=${rowDta.id}&type=${rowDta.type}`
          })
        } else if (rowDta.type === 4) {
          uni.navigateTo({
            url: `/pages/artworks/videoWallpaperDetails?id=${rowDta.id}&type=${rowDta.type}`
          })
        } else if (rowDta.type === 2 || rowDta.type === 3) {
          uni.navigateTo({
            url: `/pages/artworks/artworksSquareDetails?id=${rowDta.id}&type=${rowDta.type}`
          })
        }
      },

      // 上传的创作类型
      getAllArtworksTypeByMerchantId() {
        allArtworksTypeByMerchantId().then(result => {
          if (result && result.data && result.data.length > 0) {
            this.allArtworksTypeListData = result.data;
          }
        })
      },

      // 获取下载历史列表
      getMyArtworksListByMiniProgram() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          duration: 5 * 1000
        })
        myArtworksListByMiniProgram({
          ...this.searchForm,
          ...{ type: this.artworksType }
        }).then(result => {
          this.loading = false;
          uni.hideToast();
          if (result && result.data && result.data.records && result.data.records.length > 0) {
            let listData = result.data.records;
            listData.forEach(item => {
              item.created_at = parseTime(new Date(item.created_at), '{y}-{m}-{d} {h}:{i}:{s}');
              item.playFlage = false;
            })
            this.artworksListData = [...this.artworksListData, ...listData];
            if (this.searchForm.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            }
            this.searchForm.pageNum = this.searchForm.pageNum + 1;
          }
        })
      },

      // 切换tabs
      changeTbas(index) {
        this.tabsCurrent = index;
        this.artworksListData = [];
        this.showNoMoreFlag = false;
        this.searchForm.pageNum = 1;
        this.artworksType = this.allArtworksTypeListData[index].id;
        this.getMyArtworksListByMiniProgram(); // 获取下载历史列表
      },
    },
    // 下拉加载
    onReachBottom() {
      if (!this.showNoMoreFlag) {
        this.getMyArtworksListByMiniProgram(this.tabsList[this.tabsCurrent].id);
      } else {
        uni.showToast({
          title: '没有更多的数据啦！',
          icon: 'none'
        })
      }
    }
  }
</script>

<style lang="scss">
page{
  background-color: #2c2860;
}

.download-history-container{
  padding: 100rpx 24rpx 24rpx 24rpx;
}

.tabs-container{
  height: 88rpx;
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
</style>
